<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<script src="js/mui.min.js"></script>
		<script type="text/javascript" src="js/app.js"></script>
		<link rel="stylesheet" type="text/css" href="css/registLogin/util.css">
		<link rel="stylesheet" type="text/css" href="css/registLogin/main.css">

		<script type="text/javascript" charset="utf-8">
			mui.init();
		</script>

		<style>
			.p-t-85 {
				padding-top: 10px;
			}
			
			.p-b-70 {
				padding-bottom: 35px;
			}
			
			.m-t-85 {
				margin-top: 15px;
			}
			
			.container-login100 {
				padding: 25px;
			}
			/*toast信息提示*/
			
			.mui-toast-container {
				bottom: 50% !important;
			}
			.mui-toast-message {
				opacity: 0.6;
				color: #fff;
				width: 180px;
				padding: 70px 5px 10px 5px;
			}
		</style>
	</head>

	<body>

		<div class="mui-content">
			<div class="container-login100">
				<div class="wrap-login100 p-t-85 p-b-20">
					<form id="userform">
						<span class="login100-form-title p-b-70">
							<h5>WECHAT</h5>
						</span>
						<span class="login100-form-avatar">
							<img id="img_login_face" src="css/registLogin/headimg.jpg" alt="风间影月">
						</span>

						<div class="wrap-input100 validate-input m-t-85 m-b-35">
							<input class="input100" type="text" id="username" name="username" placeholder="用户名">
							<span class="focus-input100"></span>
						</div>

						<div class="wrap-input100 validate-input m-b-50">
							<input class="input100" type="password" id="u_password" name="u_password" placeholder="密码">
							<span class="focus-input100"></span>
						</div>
						<div class="container-login100-form-btn">
							<button type="submit" id="registOrLogin" class="login100-form-btn">
								登录/注册
							</button>
						</div>
					</form>
					
				</div>
			</div>
		</div>
		
		<script type="text/javascript">
			
			mui.plusReady(function() {
				// 是否登陆过呢
				var fr_user_info = app.getUserInfo();
				if(fr_user_info != null){
					mui.openWindow("index.html", "index.html");
				}
				var userform = document.getElementById("userform");
				var username = document.getElementById("username");
				var u_password = document.getElementById("u_password");
				// 为表单添加提交事件监听
				userform.addEventListener("submit", function(e){
					// 用户名如果为空让输入框获得焦点
					if (!app.isNotNull(username.value)) {
						username.focus();
					}else if(!app.isNotNull(u_password.value)){
						u_password.focus();
					} else {
						let inputName = username.value.replace(/\s*/g,"");
						let inputPwd = u_password.value.replace(/\s*/g,"");
						if(inputName.length > 12 || inputName.length < 5 ){
							app.showToast("用户名长度5-12位！","error");
							return false;
						}else if(inputPwd.length > 20 || inputPwd.length < 8){
							app.showToast("密码长度8-20位！","error");
							return false;
						}
						var cid= plus.push.getClientInfo().clientid
						if(!app.isNotNull(cid)){
							app.showToast("软件不支持模拟器上运行！","error");
							return false;
						}
						mui.ajax(app.serverUrl + '/u/registerOrLogin',{
							data:{
								userName: inputName,
								password: inputPwd,
								clientId: cid
							},
							dataType:'json',//服务器返回json格式数据
							type:'post',//HTTP请求类型
							timeout:10000,//超时时间设置为10秒；
							headers:{'Content-Type':'application/json'},	              
							success:function(data){
								//服务器返回响应，根据响应结果，分析是否登录成功；
								username.blur();
								u_password.blur();
								if(data.status == 200){
									// 登陆成功后保存到本地缓存
									var user_info = data.data;
									app.setUserInfo(user_info);
									// 页面跳转
									mui.openWindow("index.html", "index.html");
								}else{
									app.showToast(data.msg, "error");
								}
							}
						});
						
					}
					e.preventDefault();
				});
				
			})
		</script>
	</body>
</html>